{% extends 'base.html' %}

{% block css %}
{% endblock %}

{% block titleinfo %}

    <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
            <i class="home-icon blue"> 漏洞列表 </i>
        </ul>
    </div>

{% endblock %}

{% block webinfo %}

    <div class="row">
        <div class="col-xs-12">

            <div class="table-header">
                <a class="btn btn-primary" href="#" role="button" id="delete_choice">
                    <i class="ace-icon fa fa-trash-o bigger-110"></i>
                    删除选中
                </a>
            </div>

            <!-- div.table-responsive -->

            <!-- div.dataTables_borderWrap -->
            <div>
                <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                    <thead>
                            <tr class="center">

                                <th class="center">漏洞地址</th>
                                <th class="center">漏洞名称</th>
                                <th class="center">漏洞类型</th>
                                <th class="center">所属任务</th>
                                <th class="center">检测时间</th>
                                <th class="center">操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for i in vul_data %}
                                <tr  class="center">
                                    <td>
                                        <input type="checkbox" name="check_id" value="{{ i['_id'] }}"/>
                                    </td>
                                    <td>
                                        <a class="green vul_id" role="button" data-toggle="modal" href="#" rel="{{ i['_id'] }}" title="查看结果" data-target="#vulResult">
                                            {{ i['target'] }}
                                        </a>
                                    </td>
                                    <td>{{ i['poc_name'] }}</td>
                                    <td>{{ i['poc_vultype'] }}</td>
                                    <td>{{ i['task_name'] }}</td>
                                    <td>{{ i['scan_date'] }}</td>
                                    <td>
                                        <div class="hidden-sm hidden-xs action-buttons">

                                            <a class="green vul_id" role="button" data-toggle="modal" href="#" rel="{{ i['_id'] }}" title="查看结果" data-target="#vulResult">
                                                <i class="ace-icon fa fa-file-archive-o bigger-130"></i>
                                            </a>
                                            &nbsp;
                                            <a class="red" href="vulnerability-management?delete={{ i['_id'] }}" title="删除" >
                                                <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                            </a>
                                        </div>

                                    </td>
                                </tr>
                            {% endfor %}

                        </tbody>
                </table>
                <div class="modal fade" id="vulResult" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">×
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    扫描结果
                                </h4>
                            </div>

                            <div class="modal-body" >
                                <div class="form-group">
                                    <div>
                                        <textarea class="form-control" rows="14" id="scan_target_list" disabled="disabled">正在载入...</textarea>
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </div>
        </div>
    </div>

{% block js %}

    <!-- page specific plugin scripts -->
    <script src="static/assets/js/dataTables/jquery.dataTables.js"></script>
    <script src="static/assets/js/dataTables/jquery.dataTables.bootstrap.js"></script>
    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        jQuery(function($) {
            $(".vul_id").click(function() {
                var vul_id = $(this).attr('rel');
                var data = {
                    "result": vul_id,
                };
                $.ajax({
                    type: 'GET',
                    url: '/vulnerability-management',
                    data: data,
                    dataType: 'json',
                    success: function(vul_result) {
                        var vul_result  = eval(vul_result);
                        $('#scan_target_list').val(JSON.stringify(vul_result, null, 4));
                    },
                    error: function(xhr, type) {
                    }
                });

              });

            {#删除选中#}
            $("#delete_choice").click(function() {
                const scan_option = $("input[type='checkbox']").is(':checked');
                var vul_id = '';
                if (scan_option) {
                    $("input[name='check_id']:checked").each(function () {
                        var values = $(this).val();
                        vul_id += (values + ",");
                    });
                }
                var data = {
                    "vul_id": vul_id,
                };
                $.ajax({
                    type: 'POST',
                    url: '/vulnerability-management',
                    data: data,
                    dataType: 'json',
                    success: function(data) {
                        alert("删除成功");
                        location.reload();
                        history.back();
                    },
                    error: function(xhr, type) {
                    }
                });
              });


            //initiate dataTables plugin
            var myTable =
            $('#dynamic-table')
            //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
            .DataTable( {
                bAutoWidth: false,
                "aoColumns": [
                  { "bSortable": false },
                  null, null,null, null, null,
                  { "bSortable": false }
                ],
                "aaSorting": [],


                //"bProcessing": true,
                //"bServerSide": true,
                //"sAjaxSource": "http://127.0.0.1/table.php"	,

                //,
                //"sScrollY": "200px",
                //"bPaginate": false,

                //"sScrollX": "100%",
                //"sScrollXInner": "120%",
                //"bScrollCollapse": true,
                //Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
                //you may want to wrap the table inside a "div.dataTables_borderWrap" element

                //"iDisplayLength": 50


                select: {
                    style: 'multi'
                }
            } );



            $.fn.dataTable.Buttons.swfPath = "static/assets/js/dataTables/extensions/Buttons/swf/flashExport.swf"; //in Ace demo static/assets will be replaced by correct assets path
            $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

            new $.fn.dataTable.Buttons( myTable, {
                buttons: [
                  {
                    "extend": "colvis",
                    "text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
                    "className": "btn btn-white btn-primary btn-bold",
                    columns: ':not(:first):not(:last)'
                  },
                  {
                    "extend": "copy",
                    "text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "csv",
                    "text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "excel",
                    "text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "pdf",
                    "text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
                    "className": "btn btn-white btn-primary btn-bold"
                  },
                  {
                    "extend": "print",
                    "text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
                    "className": "btn btn-white btn-primary btn-bold",
                    autoPrint: false,
                    message: 'This print was produced using the Print button for DataTables'
                  }
                ]
            } );
            myTable.buttons().container().appendTo( $('.tableTools-container') );

            //style the message box
            var defaultCopyAction = myTable.button(1).action();
            myTable.button(1).action(function (e, dt, button, config) {
                defaultCopyAction(e, dt, button, config);
                $('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
            });


            var defaultColvisAction = myTable.button(0).action();
            myTable.button(0).action(function (e, dt, button, config) {

                defaultColvisAction(e, dt, button, config);


                if($('.dt-button-collection > .dropdown-menu').length == 0) {
                    $('.dt-button-collection')
                    .wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
                    .find('a').attr('href', '#').wrap("<li />")
                }
                $('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
            });

            ////

            setTimeout(function() {
                $($('.tableTools-container')).find('a.dt-button').each(function() {
                    var div = $(this).find(' > div').first();
                    if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
                    else $(this).tooltip({container: 'body', title: $(this).text()});
                });
            }, 500);





            myTable.on( 'select', function ( e, dt, type, index ) {
                if ( type === 'row' ) {
                    $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
                }
            } );
            myTable.on( 'deselect', function ( e, dt, type, index ) {
                if ( type === 'row' ) {
                    $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
                }
            } );




            /////////////////////////////////
            //table checkboxes
            $('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);

            //select/deselect all rows according to table header checkbox
            $('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
                var th_checked = this.checked;//checkbox inside "TH" table header

                $('#dynamic-table').find('tbody > tr').each(function(){
                    var row = this;
                    if(th_checked) myTable.row(row).select();
                    else  myTable.row(row).deselect();
                });
            });

            //select/deselect a row when the checkbox is checked/unchecked
            $('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
                var row = $(this).closest('tr').get(0);
                if(!this.checked) myTable.row(row).deselect();
                else myTable.row(row).select();
            });



            $(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
            });



            //And for the first simple table, which doesn't have TableTools or dataTables
            //select/deselect all rows according to table header checkbox
            var active_class = 'active';
            $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
                var th_checked = this.checked;//checkbox inside "TH" table header

                $(this).closest('table').find('tbody > tr').each(function(){
                    var row = this;
                    if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                });
            });

            //select/deselect a row when the checkbox is checked/unchecked
            $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
                var $row = $(this).closest('tr');
                if($row.is('.detail-row ')) return;
                if(this.checked) $row.addClass(active_class);
                else $row.removeClass(active_class);
            });



            /********************************/
            //add tooltip for small view action buttons in dropdown menu
            $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

            //tooltip placement on right or left
            function tooltip_placement(context, source) {
                var $source = $(source);
                var $parent = $source.closest('table')
                var off1 = $parent.offset();
                var w1 = $parent.width();

                var off2 = $source.offset();
                //var w2 = $source.width();

                if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
                return 'left';
            }




            /***************/
            $('.show-details-btn').on('click', function(e) {
                e.preventDefault();
                $(this).closest('tr').next().toggleClass('open');
                $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
            });
            /***************/





            /**
            //add horizontal scrollbars to a simple table
            $('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
              {
                horizontal: true,
                styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
                size: 2000,
                mouseWheelLock: true
              }
            ).css('padding-top', '12px');
            */


        })
    </script>
    <script src="static/assets/js/checkbox.js"></script>

{% endblock %}

{% endblock %}